<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<title>3D立方体</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			body {
				background: black;
			}
			
			li {
				list-style: none;
			}
			/*重置*/
				
			ul {
				width: 200px;
				height: 200px;
				margin: 100px auto;
				position: relative;
				transform-style: preserve-3d;
				/*transform-origin: 50% 50% 50%;
				perspective: 20000px;*/
			}
			/*如果在ul里设置：-webkit-perspective:400px;-webkit-perspective-origin:0% 50%; 则会有透视、景深的效果*/
			
			li {
				width: 200px;
				height: 200px;
				border: 2px solid black;
				position: absolute;
				text-align: center;
				line-height: 200px;
				font-size: 80px;
				font-weight: 700;
				color: #fff;
			}
			
			li:nth-child(1) {
				color: red;
				background: rgba(111, 111, 111, 0.5);
				transform: rotateX(90deg) translateZ(100px);
			}
			
			li:nth-child(2) {
				color: red;
				background: rgba(225, 255, 255, 0.1);
				transform: rotateX(270deg) translateZ(100px);
			}
			
			li:nth-child(3) {
				color: red;
				background: rgba(225, 255, , 0.5);
				transform: rotateY(90deg) translateZ(100px);
			}
			
			li:nth-child(4) {
				color: red;
				transform: rotateY(270deg) translateZ(100px);
			}
			
			li:nth-child(5) {
				color: red;
				transform: translateZ(-100px);
			}
			
			li:nth-child(6) {
				color: red;
				transform: translateZ(100px);
			}
			/*****当执行下列css时，立方体无限自由旋转******/
			
			ul {
				animation: run 5s linear infinite;
			}
			
			@keyframes run {
				0% {
					transform: rotateX(0deg) rotateY(0deg);
				}
				100% {
					transform: rotateX(360deg) rotateY(360deg);
				}
			}
			/*	ul:hover{
				animation-play-state: paused;
			}*/
		</style>
	</head>

	<body>
		<ul id="ul">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</body>

</html>